<template>
	<view class="page flex-1 h-100 bac-color-page" style="padding: 28rpx;">
		<!-- <view class="banner-box mar-t-12 mar-l-10 mar-r-10">
			<swiper
				class="banner"
				:indicator-dots="true"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
			>
				<swiper-item class=" flex-column flex-1" v-for="(item,index) in banners" :key="index">
					<image  class="banner-item " :src="item.image" mode="widthFix" lazy-load='true'></image>
				</swiper-item>
				
			</swiper>
		</view> -->
		<view class="flex-1 h-100">
			<act-list :range="list"></act-list>
		</view>
		<no-more v-if="index_page >= total_page"></no-more>
	</view>
</template>

<script>
import actList from '@/components/act-list'
import { getActList, activityCate, getBanners } from '@/utils/http'
export default {
	data() {
		return {
			//团体辅导,主题讲座,专业培训,沙龙活动
			index_page: 0,
			total_page: 1,
			list: [],
			current_index: 0,
			cate_list: '',
			autoplay: true,
			interval:6000,
			duration:500,
			banners:[]
		}
	},
	components: {
		actList
	},
	methods: {
		getBanner(){
			let _that = this;
			getBanners({'num':6,'pos':'huodong'}).then(res=>{
				if(res){
					_that.banners = res.data
				}
				
			})
		},
		clearData() {
			this.list = []
			this.index_page = 0
			this.total_page = 1
		},
		setIndex(i) {
			if (i != this.current_index) {
				this.current_index = i
				this.clearData()
				this.activitys()
			}
		},
		async getCate() {
			await activityCate().then(res => {
				if (res) {
					this.cate_list = res
				}
			})
		},
		activitys() {
			const _that = this
			const current_cate = this.cate_list[this.current_index]
			getActList({
				page: this.index_page + 1,
				// cate: current_cate.id
			}).then(res => {
				if (res) {
					_that.index_page = res.current_page
					_that.total_page = res.last_page
					_that.list = [..._that.list, ...res.data]
				}
			})
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.index_page = 0
		this.total_page = 1
		this.list = []
		// this.getCate()
		this.activitys()
	},
	//上拉加载
	onReachBottom() {
		if (this.index_page < this.total_page) {
			// if (this.cate_list) {
			// 	this.activitys()
			// }
			this.activitys()
		}
	},
	async onLoad() {
		// await this.getCate()
		// if (this.cate_list) {
		// 	this.activitys()
		// }
		this.getBanner();
		this.activitys();
	}
}
</script>

<style scoped>
page {
	background-color: #f9f9f9;
	min-height: 100vh;
}
.tab-bar {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.tab-bar ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */
.tab-bar-line {
	height: 1px;
	background-color: #cccccc;
}

.uni-tab-item {
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 13px 20px;
}

.uni-tab-item-title {
	color: #555;
	font-size: 0.8em;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.uni-tab-item .active {
	color: #0088ff !important;
	font-size: 0.89em;
	font-weight: 600;
}


</style>
